﻿import {useState} from "react";
import Input from "./Input.jsx";
import {
    hasMinLength,
    isEmail,
    isNotEmpty
} from "../util/validation.js";
import {useInput} from "../hooks/useInput.js";

export default function StateLogin() {
    const {
        value:emailValue,
        handleInputChange:handleEmailChange,handleInputBlur:handleEmailBlue,
        hasError:emailHasError,
    } = useInput('',(value)=> isEmail(value) && isNotEmpty(value)
    );

    const {
        value:passwordValue,
        handleInputChange:handlePasswordChange,
        handleInputBlur:handlePasswordBlur,
        hasError:passwordHasError
    } = useInput('',(value)=>hasMinLength(value,6));


    const passwordInvalid = didEdit.password && !hasMinLength(enteredValues.password,6)


    function handleSubmit(event){
        event.preventDefault();

        if(emailHasError || passwordHasError){
            return;
        }

        console.log(emailValue,passwordValue);
    }

    return (
        <form onSubmit={handleSubmit}>
            <h2>Login</h2>

            <div className="control-row">
                <Input
                    label={"email"}
                    id={"email"}
                    type={"email"}
                    name={"email"}
                    onBlur={handleEmailBlue}
                    onChange={handleEmailChange}
                    value={emailValue}
                    error={emailHasError && 'Please enter a valid email!'}
                />
                <Input
                    label={"password"}
                    id={"password"}
                    type={"password"}
                    name={"password"}
                    onBlur={handlePasswordBlur}
                    onChange={handlePasswordChange}
                    value={passwordValue}
                    error={passwordHasError && 'Please enter a valid password!'}
                />
            </div>

            <p className="form-actions">
                <button className="button button-flat">Reset</button>
                <button className="button">Login</button>
            </p>
        </form>
    );
}
